<template>
  <el-dialog :visible="visible" :title="title" center @close="onCloseDialog">
    <div class="tooltip-text">注：统计考勤时，异常状态优先正常状态</div>
    <el-form>
      <el-form-item>
        <el-radio-group v-model="attendanceData.adtStatu">
          <el-radio v-for="(item, index) in attendanceStatus" :key="index" :label="index + 1" style="width: 120px; margin: 10px 0;">{{ item }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="onSaveAttendanceStatus">确 定</el-button>
      <el-button @click="onCloseDialog">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { updateAttendanceStatusAPI } from '@/api/attendance'

export default {
  name: 'AttendanceStatusEditor',
  data() {
    return {
      visible: false, // 是否显示弹窗
      attendanceData: {}, // 考勤数据
      attendanceStatus: [
        '正常',
        '旷工',
        '迟到',
        '早退',
        '外出',
        '出差',
        '年假',
        '事假',
        '病假',
        '婚假',
        '丧假',
        '产假',
        '奖励产假',
        '陪产假',
        '探亲假',
        '工伤假',
        '调休',
        '产检假',
        '流产假',
        '长期病假',
        '补签',
        '休息'
      ]
    }
  },
  computed: {
    // 弹窗标题
    title() {
      if (this.attendanceData.id) {
        const month = this.attendanceData.day.substr(4, 1) === '0' ? this.attendanceData.day.substr(5, 1) : this.attendanceData.day.substr(4, 2)
        const day = this.attendanceData.day.substr(6, 1) === '0' ? this.attendanceData.day.substr(7, 1) : this.attendanceData.day.substr(6, 2)
        return `${month} / ${day}（实际工作日考勤方案）`
      } else {
        return ''
      }
    }
  },
  methods: {
    // 打开弹窗
    open(attendanceData) {
      this.attendanceData = attendanceData
      this.visible = true
    },
    // 关闭弹窗
    onCloseDialog() {
      this.visible = false
    },
    // 保存考勤状态
    async onSaveAttendanceStatus() {
      console.log(this.attendanceData)
      await updateAttendanceStatusAPI(this.attendanceData.id, {
        userId: this.attendanceData.userId,
        day: this.attendanceData.day,
        adtStatu: this.attendanceData.adtStatu,
        departmentId: this.attendanceData.departmentId
      })
      // 提示保存成功
      this.$message.success('考勤状态保存成功')
      // 提示父组件刷新考勤列表
      this.$emit('getAttendanceList')
      // 关闭弹窗
      this.onCloseDialog()
    }
  }
}
</script>

<style lang="scss" scoped>
.tooltip-text {
  color: red;
  margin-bottom: 20px;
}
</style>
